<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
	<!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
	<ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="$store.state.setting.isScale">
		<div class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<!-- 头部 s -->
				<div class="d-flex jc-center" style="background-color: rgba(3, 5, 12, 1);padding: 20px 10px;">
					<div class="title_wrap">
						<div class="zuojuxing"></div>
						<div class="youjuxing"></div>
						<div class="guang"></div>
						<div class="d-flex jc-center">
							<div class="title">
								<span class="title-text">污水处理厂智能水务专家系统</span>
							</div>
						</div>
						<div class="timers">
							<div style="display: flex;align-items: center;">
								<label>策略：</label>
								<el-select size="mini" v-model="selectModel" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</div>
							<span style="font-size: 16px;margin-left: 12px;">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
							<!-- <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i> -->
						</div>

						<div class="comperny-title">
							福建永越智能科技股份有限公司
						</div>
					</div>
				</div>
				<!-- 头部 e-->
				<!-- 内容  s-->
				<router-view></router-view>
				<!-- 内容 e -->
			</div>
		</div>
		<Setting ref="setting" />
	</ScaleScreen>
	<!-- </div> -->
</template>

<script>
	import {
		formatTime
	} from "../utils/index.js";
	import Setting from "./setting.vue";
	import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
	export default {
		components: {
			Setting,
			ScaleScreen
		},
		data() {
			return {
				options: [{
					label: "最低成本运行",
					value: "最低成本运行"
				},{
					label: "最低浓度运行",
					value: "最低浓度运行"
				},{
					label: "最低碳排放运行",
					value: "最低碳排放运行"
				}],
				selectModel: "最低成本运行",
				timing: null,
				loading: true,
				dateDay: null,
				dateYear: null,
				dateWeek: null,
				weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
			};
		},
		filters: {
			numsFilter(msg) {
				return msg || 0;
			},
		},
		computed: {},
		created() {},
		mounted() {
			this.timeFn();
			this.cancelLoading();
		},
		beforeDestroy() {
			clearInterval(this.timing);
		},
		methods: {
			showSetting() {
				this.$refs.setting.init();
			},
			timeFn() {
				this.timing = setInterval(() => {
					this.dateDay = formatTime(new Date(), "HH: mm: ss");
					this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
					this.dateWeek = this.weekday[new Date().getDay()];
				}, 1000);
			},
			cancelLoading() {
				let timer = setTimeout(() => {
					this.loading = false;
					clearTimeout(timer);
				}, 500);
			},
		},
	};
</script>

<style lang="scss">
	@import "./home.scss";
	.el-input__inner {
	    background-color: rgba(3, 5, 12, 1);
	    border: 1px solid C0C4CC;
	    color: #fff;
		// border-color: #C0C4CC;
	}
</style>